<template>
  <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      :draggable="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      @opened="dialogOpened"
      @close="dialogClose"
  >
    <el-form
        :model="logDialogItem"
        ref="logDialogItemRef"
        label-width="120px"
        label-suffix=":"
        :disabled="true"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="操作用户" prop="userName">
            <el-input v-model="logDialogItem.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统类型" prop="systemType">
            <common-dict-select :dict-key="SYSTEM_SYSTEM_TYPE" :value="logDialogItem.systemType"></common-dict-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="操作描述" prop="description">
            <el-input v-model="logDialogItem.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="请求地址" prop="requestUrl">
            <el-input v-model="logDialogItem.requestUrl"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="请求方式" prop="method">
            <el-input v-model="logDialogItem.method"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="请求内容类型" prop="contentType">
            <el-input v-model="logDialogItem.contentType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="浏览器" prop="browser">
            <el-input v-model="logDialogItem.browser"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="操作系统" prop="os">
            <el-input v-model="logDialogItem.os"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IP地址" prop="ip">
            <el-input v-model="logDialogItem.ip"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="操作时间" prop="createTime">
            <el-input v-model="logDialogItem.createTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="请求参数" prop="requestParam">
            <el-input v-model="logDialogItem.requestParam" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="响应参数" prop="responseParam">
            <el-input v-model="logDialogItem.responseParam" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="耗时" prop="duration">
            <el-input v-model="logDialogItem.duration"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日志类型" prop="logType">
            <common-dict-select :dict-key="SYSTEM_LOG_TYPE" v-model="logDialogItem.logType"></common-dict-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属模块" prop="systemModule">
            <common-dict-select :dict-key="SYSTEM_MODULE" v-model="logDialogItem.systemModule"></common-dict-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="追踪码" prop="tranceId">
            <el-input v-model="logDialogItem.traceId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button type="danger" @click="dialogClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import CommonDictSelect from "@/components/common/CommonDictSelect.vue";
import {SYSTEM_LOG_TYPE, SYSTEM_MODULE, SYSTEM_SYSTEM_TYPE} from "@/constants/dict-constants.ts";
import {getOneLogReq} from "@/api/admin/log.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import {formatObjToStr} from "@/utils/format-utils.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  dialogTitle: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: ''
  },
  relationId: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['dialogClose'])

const showDialog = ref(props.showDialog)
watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})

const dialogOpened = async () => {
  const params = {
    id: props.relationId
  }
  const res: any = await getOneLogReq(params)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    const data = res.data
    logDialogItem.systemType = formatObjToStr(data.systemType)
    logDialogItem.requestUrl = data.requestUrl
    logDialogItem.method = data.method
    logDialogItem.contentType = data.contentType
    logDialogItem.browser = data.browser
    logDialogItem.description = data.description
    logDialogItem.os = data.os
    logDialogItem.ip = data.ip
    logDialogItem.createTime = data.createTimeFormat
    logDialogItem.requestParam = data.requestParam
    logDialogItem.responseParam = data.responseParam
    logDialogItem.duration = data.duration
    logDialogItem.userName = data.userName
    logDialogItem.logType = formatObjToStr(data.logType)
    logDialogItem.systemModule = formatObjToStr(data.systemModule)
    logDialogItem.traceId = data.traceId
  }

}
const dialogClose = () => {
  emits('dialogClose', false)
}

interface LogDialogItem {
  systemType: string;
  requestUrl: string;
  method: string;
  contentType: string;
  browser: string;
  description: string;
  os: string;
  ip: string;
  createTime: string;
  requestParam: string;
  responseParam: string;
  duration: string;
  userName: string;
  logType: string;
  systemModule: string;
  traceId: string;
}

const logDialogItem = reactive<LogDialogItem>({
  systemType: '',
  requestUrl: '',
  method: '',
  contentType: '',
  browser: '',
  description: '',
  os: '',
  ip: '',
  createTime: '',
  requestParam: '',
  responseParam: '',
  duration: '',
  userName: '',
  logType: '',
  systemModule: '',
  traceId: ''
})


</script>

<style scoped>

</style>